<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <div class="toolbar">
          <a-input-search
            v-model:value="ApiData.stockInfo1"
            placeholder="股票名称查询"
            style="width: 200px; margin-right: 10px"
            @search="onSearchByName"
            @pressEnter="onSearchByName"
          />
          <a-input-search
            v-model:value="ApiData.stockInfo2"
            placeholder="股票识别号查询"
            style="width: 200px; margin-right: 10px"
            @search="onSearchByNum"
            @pressEnter="onSearchByNum"
          />
          <a-checkbox @change="changeArttation" :checked="isAttaionStock">
            自选股
          </a-checkbox>
        </div>
      </template>
    </vxe-toolbar>
    <!-- 表格 -->
    <vxe-table
      border
      show-header-overflow
      show-overflow
      resizable
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="name"
        title="股票名"
        min-width="150"
      ></vxe-table-column>
      <vxe-table-column title="股票识别号" min-width="180">
        <template #default="{ row }">
          <a-tag color="red">{{ row.identifier }}</a-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="price"
        title="价格(元)"
        min-width="180"
      ></vxe-table-column>
      <vxe-table-column field="address" title="加自选" min-width="180">
        <template #default="{ row }">
          <!-- 删除 -->
          <a-popconfirm
            placement="right"
            :ok-text="row.isAttention ? '确定' : '添加'"
            cancel-text="再看看"
            @confirm="addPersinalStock(row)"
          >
            <template v-slot:title>
              <p v-if="!row.isAttention">确认添加该股票为自选股票吗?</p>
              <p v-else>确认取消自选股票吗?</p>
            </template>
            <a
              class="icon-aixin iconfont icon"
              :style="{ color: row.isAttention ? 'red' : 'gray' }"
            ></a>
          </a-popconfirm>
        </template>
      </vxe-table-column>
      <vxe-table-column field="address" title="数据查看" min-width="180">
        <template #default="{ row }">
          <a @click="lookStockDetail(row)" style="margin-right: 10px">
            历史数据
          </a>
          <a @click="lookStockDetail(row)">今日数据</a>
        </template>
      </vxe-table-column>
    </vxe-table>
    <!-- 分页 -->
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="dataTotalNum"
      :defaultPageSize="ApiData.pageSize"
      @change="onChange"
    />
  </div>
</template>
<script>
import {
  stockList,
  attentStock,
  attentionStockList,
  stockPriceDetail,
} from '@/api/stock'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      // 表格数据居中
      allAlign: 'center',
      // api数据
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        type: 0, //0 全部 1 根据股票名称查询 2 根据股票识别号查询
        stockInfo1: '', //	股票名称
        stockInfo2: '', //	股票标识号
      },
      // 表格数据
      tableData: [],
      // 总数
      dataTotalNum: 0,
      // 是否是自选股
      isAttaionStock: false,
    }
  },
  computed: {
    ...mapGetters({
      acl: 'acl/role',
    }),
  },
  mounted() {
    console.log(this.acl)
    this.getStockListData()
  },
  watch: {
    ApiData: {
      handler(newV, oldV) {
        if (newV.stockInfo1 === '' && newV.stockInfo2 === '') {
          this.ApiData.type = 0
          this.getStockListData()
        }
      },
      deep: true,
    },
    isAttaionStock: {
      handler(newV, oldV) {
        if (!newV) this.getStockListData()
      },
      immedidate: true,
    },
  },
  methods: {
    /**
     * 用户查询
     */
    onSearch() {},
    /**
     * 分页
     */
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getUserListData()
    },
    /**
     * 股票列表查询
     */
    getStockListData() {
      stockList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.dataTotalNum = res.queryResult.total
      })
    },
    /**
     * 添加心仪股票
     */
    addPersinalStock(info) {
      var form = {
        stockId: info.id,
        type: info.isAttention ? 2 : 1,
      }
      attentStock(form).then((res) => {
        this.getStockListData()
        this.$message.success('关注成功')
      })
    },
    /**
     * 股票名字查询
     */
    onSearchByName() {
      this.ApiData.type = 1
      this.ApiData.stockInfo = this.ApiData.stockInfo1
      this.getStockListData()
      this.$message.success('查询成功')
    },
    /**
     * 股票识别号查询
     */
    onSearchByNum() {
      this.ApiData.type = 2
      this.ApiData.stockInfo = this.ApiData.stockInfo2
      this.getStockListData()
      this.$message.success('查询成功')
    },
    /**
     * 添加股票
     */
    sureAddStock() {
      if (this.addStockForm.name === '') {
        this.$message.error('股票名称不能为空')
        return
      }
      if (this.addStockForm.identifier === '') {
        this.$message.error('股票识别号不能为空')
        return
      }
      this.addStockForm.identifier = 'sh' + this.addStockForm.identifier
      addStock(this.addStockForm).then((res) => {
        this.$message.success('添加成功')
        this.getStockListData()
      })
    },
    /**
     * 自选股
     */
    changeArttation(e) {
      this.isAttaionStock = e.target.checked
      attentionStockList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.dataTotalNum = res.queryResult.total
      })
    },
    lookStockDetail(info) {
      this.$router.push({
        path: '/index',
        query: {
          id: info.identifier,
          type: info.type,
        },
      })
      // setInterval(() => {
      //   stockPriceDetail({ id: id }).then((res) => {
      //     console.log(res.queryResult.list[0].nowPrice)
      //   })
      // }, 1000)
    },
  },
}
</script>
<style lang="less" scoped>
.toolbar {
  // width: 100px;
  // overflow:scroll;
  // height: 50px;
  // display: flex;
  // justify-content: flex-start;
}
.icon {
  margin: 0 10px;
  &:nth-child(-n + 2) {
    color: gray;
    font-size: 20px;
    &:hover {
      color: pink;
    }
  }
}
</style>>

